<template>
	<view class="me-top-container" @click="judgeLogin">
		<image class="me-user-image" src="../../static/logo.png" mode="widthFix"></image>
		<view class="me-top-fill"></view>
		<view class="me-top-body">
			<view class="me-name" >{{data.nickname}}</view>
			<view class="me-personal-front">{{data.personality_front}}</view>
		</view>
	</view>
	<view class="me-go-container">
		<view class="me-go">
			<text class="me-go-text">我的订单</text>
			<image class="me-go-image" src="../../static/go.png" mode="widthFix"></image>
		</view>
		<view class="me-go" v-if="data.role==3||data.role==2" @tap="goFruitAdmin">
			<text class="me-go-text">果切商家系统</text>
			<image class="me-go-image" src="../../static/go.png" mode="widthFix"></image>
		</view>
		<view class="me-go" v-if="data.role==1||data.role==2" @tap="goAdmin">
			<text class="me-go-text">管理员系统</text>
			<image class="me-go-image" src="../../static/go.png" mode="widthFix"></image>
		</view>
	</view>
	<view class="me-logout-btn" v-if="data.isLogin" @click="logout">
		退出登录
	</view>
	<view class="me-footer-container">
		<text class="me-footer-text">关于我们</text>|<text class="me-footer-text">加入我们</text>
	</view>
	<TabBar currentTab="me"></TabBar>
</template>

<script>
	import {onMounted, reactive} from 'vue'
	import global from "../../config/global.js"
	import {onShow} from '@dcloudio/uni-app'
	import {useStore} from 'vuex'
	import TabBar from "../../components/tabbar/tabbar.vue"
	export default {
		name:'me',
		components:{
			TabBar
		},
		setup(){
			let data = reactive({
				nickname:"游客",
				personality_front:"亲爱的用户，快快登陆吧~",
				role:0,
				isLogin:false
			})
			let store = useStore()
			
			onMounted(()=>{
				getData()
			})
			
			onShow(()=>{
				if(uni.getStorageSync("localtoken")){
					uni.request({
						method:"GET",
						url:global.BASE_URL+"/user/myroughinfo",
						header:{
							"mytoken":uni.getStorageSync("localtoken")
						},
						success:(res)=>{
							// console.log(res);
							if(res.data.code){
								data.nickname = res.data.data.nickname;
								data.personality_front = res.data.data.personality_front;
								data.role = res.data.data.role;
								data.isLogin = true;
							}
						},
						fail:(err)=>{
							console.log(err);
						}
					})
				}else{
					uni.showToast({
						title: '尚未登陆',
						icon:'error',
						duration: 1000
					});
				}
			})
			
			function getData(){
				if(uni.getStorageSync("localtoken")){
					uni.request({
						method:"GET",
						url:global.BASE_URL+"/user/myroughinfo",
						header:{
							"mytoken":uni.getStorageSync("localtoken")
						},
						success:(res)=>{
							// console.log(res);
							if(res.data.code){
								data.nickname = res.data.data.nickname;
								data.personality_front = res.data.data.personality_front;
								data.role = res.data.data.role;
								data.isLogin = true;
							}else{
								uni.showModal({
									title:"获取个人信息出错",
									content:res.data.msg,
									showCancel:false,
									success: (re) => {
										if(res.data.msg.includes("登录失效")){
											uni.removeStorageSync('localtoken')
											uni.navigateTo({
												url:'/pages/login/login'
											})
										}
									}
								})
							}
							
						},
						fail:(err)=>{
							console.log(err);
						}
					})
				}else{
					uni.showToast({
						title: '尚未登陆',
						icon:'error',
						duration: 1000
					});
				}
			}
			
			function judgeLogin(){
				if(!uni.getStorageSync("localtoken")){
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}else{
					uni.navigateTo({
						url:'/pages/me/my-info'
					})
				}
			}
			
			function logout(){
				uni.showModal({
					title:"确认退出吗？",
					success: (res) => {
						if(res.confirm){
							uni.removeStorage({
								key:'localtoken',
								success(res) {
									uni.removeStorage({
										key:'role'
									})
									uni.removeStorage({
										key: 'id',//本地缓存中的指定的 key
										success(res) {//接口调用的回调函数
											console.log('移除成功');
										}
									})
									uni.showToast({
										icon:'success',
										title:'成功退出登录',
										duration:1000
									})
									store.dispatch("CLOSE_SOCKET")
									data.nickname = "游客";
									data.personality_front = "亲爱的用户，快快登陆吧~";
									data.role = 0;
									data.isLogin = false;
								}
							})
						}
					}
				})
				
			}
			
			function goAdmin(){
				uni.navigateTo({
					url:"/page_admin/admin/admin"
				})
			}
			
			function goFruitAdmin(){
				uni.navigateTo({
					url:"/page_fruit/fruit/fruit-admin"
				})
			}
			
			return {
				data,
				judgeLogin,
				logout,
				goAdmin,
				goFruitAdmin
			}
		}
	}
</script>

<style>
	.me-top-container{
		position: relative;
		width: 700rpx;
		margin: 10rpx 25rpx;
		background-color: #fff;
	}
	
	.me-user-image{
		width: 150rpx;
		border-radius: 200rpx;
		position:absolute;
		top: 20rpx;
		left: 70rpx;
		border: 8rpx solid #9BCDD2;
		box-shadow: 0px 5px 5px #9BCDD2;
	}
	
	.me-top-fill{
		width: 700rpx;
		height: 70rpx;
		/* background-color: aqua; */
	}
	
	.me-top-body{
		width: 680rpx;
		min-height: 180rpx;
		border: 8rpx solid #9BCDD2;
		border-radius: 20rpx;
		margin-left: -8rpx;
		background-color: #d5f0ff;
		padding:10rpx;
	}
	
	.me-name{
		text-align: center;
		width: 400rpx;
		margin-left: 240rpx;
		font-size: 39rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-weight: bolder;
		/* margin-top: 10rpx; */
	}
	
	.me-personal-front{
		width: 600rpx;
		height: 50rpx;
		line-height: 50rpx;
		position: absolute;
		bottom: 30rpx;
		left: 50rpx;
		color: #515151;
		overflow: hidden;
		white-space: nowrap; 
		text-overflow: ellipsis;
	}
	
	.me-go-container{
		position: relative;
		width: 700rpx;
		margin: 10rpx 25rpx;
		background-color: #fff;
	}
	
	.me-go{
		position: relative;
		width: 660rpx;
		height: 80rpx;
		line-height: 90rpx;
		padding: 10rpx 20rpx;
		border-bottom: 2rpx solid #aaaaaa;
	}
	
	.me-go-text{
		font-size: 37rpx;
		margin-left: 10rpx;
		color: #515151;
	}
	
	.me-go-image{
		width: 45rpx;
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
	}
	
	.me-logout-btn{
		width: 450rpx;
		margin-left: 150rpx;
		margin-top: 50rpx;
		padding: 10rpx 0;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 38rpx;
		font-weight: bold;
		color: white;
		background-color: #DE6868;
		text-align: center;
		border-radius: 20rpx;
	}
	
	.me-footer-container{
		width: 450rpx;
		margin-left: 150rpx;
		margin-top: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		text-align: center;
		color: #cdcdcd;
	}
	
	.me-footer-text{
		margin: 0rpx 12rpx;
		color: #8bb9bd;
		padding-bottom:calc(24rpx + env(safe-area-inset-bottom)) ;
	}
</style>
